<template>
  <div class="shopping">
    <!-- 导航栏开始 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="产品服务"
          left-text="返回"
          left-arrow
          @click-left="goBack"
        />
      </van-sticky>
    </div>
    <!-- 导航栏结束 -->
    <!-- 内容开始 -->
    <div class="container">
      <div class="sideBar">
        <van-sticky class="sticky" :offset-top="50">
          <van-sidebar v-model="activeKey" @change="showProduct">
            <van-sidebar-item
              v-for="category in categorys"
              :key="category.id"
              :title="category.name"
            />
          </van-sidebar>
        </van-sticky>
      </div>
      <!-- 右侧商品卡片开始 -->
      <div class="product">
        <van-card
          v-for="product in products"
          :key="product.id"
          :desc="product.description"
          :title="product.name"
        >
          <template #thumb>
            <img width="100%" :src="product.photo" alt="" />
          </template>
          <template #price>
            <span>{{ product.price }}.00</span>
          </template>
          <template #footer>
            <van-stepper
              @change="clickStepper(product)"
              v-model="product.number"
              min="0"
              button-size="18px"
              theme="round"
            />
          </template>
        </van-card>
        <!-- 空div -->
        <div style="height: 120px"></div>
      </div>
      <!-- 右侧商品卡片结束 -->
      <!-- 提交按钮开始 -->
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="submitHandler"
      />
      <!-- 提交按钮结束 -->
    </div>
    <!-- 内容结束 -->
    <!-- 提示余额开始 -->
    <van-dialog
      v-model="balanceShow"
      title="提示"
      show-cancel-button
      :showConfirmButton="false"
    >
      <div style="margin: 10px">余额不足,点击跳转我的页面</div>
      <van-button style="margin: 5px" to="/manager/user" round type="default"
        >充值余额</van-button
      >
    </van-dialog>
    <!-- 提示余额结束 -->
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  name: "shopping",
  data() {
    return {
      activeKey: this.$route.query.activeKey,
      list: {
        page: 1,
        pageSize: 100,
        status: "正常",
      },
      categoryId: this.$route.query.categoryId,
      balanceShow: false,
    };
  },
  computed: {
    ...mapState("product", ["products", "categorys"]),
    ...mapState("shopcart", ["orderLines"]),
    ...mapGetters("shopcart", ["total"]),
    ...mapState("myUser", ["userInfo"]),
  },
  methods: {
    ...mapActions("product", ["getAllProduct", "getCategory"]),
    ...mapActions("sendOrder", ["getAllAddress"]),
    ...mapActions("myUser", ["getUserInfo"]),
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),
    // 侧边导航栏切换标签
    showProduct(index) {
      this.categoryId = this.categorys[index].id;
      this.allProductData();
    },
    // 获取所有产品信息
    allProductData() {
      let data = {
        ...this.list,
        productCategoryId: this.categoryId,
      };
      this.getAllProduct(data);
    },
    // 返回
    goBack() {
      this.$router.back();
      this.clearShopcart();
    },
    // 点击步进器
    clickStepper(product) {
      let orderLine = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number,
      };
      this.addShopcart(orderLine);
      // console.log(this.orderLines);
    },
    // 提交
    submitHandler() {
      console.log(this.total);
      console.log(this.userInfo.balance);
      if (this.total <= this.userInfo.balance) {
        this.$router.push("/manager/pay");
      } else {
        this.balanceShow = true;
      }
    },
  },
  created() {
    // 获取栏目信息
    this.getCategory(this.list);
    // 展示服务项目
    this.allProductData();
    // 获取地址信息
    this.getAllAddress(this.list);
    // 清空购物车
    this.clearShopcart();
    // 获取用户信息
    this.getUserInfo();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  overflow: scroll;
}
.van-sidebar {
  width: 100px;
  z-index: 101;
}
.van-nav-bar {
  border-radius: 5px;
}
.van-sidebar-item {
  background-color: transparent;
  border: 1px solid black;
  border-radius: 5px;
  margin: 3px;
  padding: 10px;
}

.sideBar {
  width: 100px;
}
.sticky {
  width: 100px;
}
.product {
  flex: 1;
  position: relative;
  z-index: 100;
  height: 500px;
  overflow: scroll;
}
.product > div {
  float: right;
}
.van-card {
  width: 92%;
  margin: 8px 10px 10px 10px;
  border-radius: 10px;
  border: 1px solid black;
  background-color: pink;
}
.van-submit-bar {
  position: absolute;
  bottom: 7.5%;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.6);
}
</style>